﻿@model MegaBitProject.Models.Game

@{
    ViewBag.Title = "TicTacToe";
}
<script src="~/Scripts/Game.js"></script>
<script src="~/Scripts/TicTacToe.js"></script>
<div id="main">
    <div class="playgame">
        <h2>You are now playing Tic Tac Toe  #@Model.ID</h2>
        <div id="stats">
            <p>You: 0</p>
            <p>Opponent: 0</p>
        </div>
        @Html.ActionLink("Back to lobby", "Lobby", "TicTacToe", null, new { @class = "lobbyBtnTTT" })
        <div id="playTTT">
            <table id="tictactoe">
                <tr>
                    <td id="cell0"></td>
                    <td id="cell1"></td>
                    <td id="cell2"></td>
                </tr>
                <tr>
                    <td id="cell3"></td>
                    <td id="cell4"></td>
                    <td id="cell5"></td>
                </tr>
                <tr>
                    <td id="cell6"></td>
                    <td id="cell7"></td>
                    <td id="cell8"></td>
                </tr>
            </table>
            <p id="errorMsg"></p>
        </div>
    </div>

    <div id="gamemsgTTT">
        <h2>Chatroom for Pictionary</h2>
        <form id="lobbychat" method="post" action="#">
        <textarea readonly id="txtmsg"></textarea>
        <input autofocus type="text" id="message" name="message" value="" />
        </form>
    </div>
    
</div>

<script type="text/javascript">
    $(function () {
        var myturn = false;
        var group = '@(Model.ID)';
        var hub = $.connection.gameHubTTT;
        var you = '@User.Identity.Name';
        var turnsMade = 0;
        var scoreX = 0;
        var scoreY = 0;

        var oArr = new Array();
        var xArr = new Array();

        hub.client.cellClicked = function (cellId) {
            $("#" + cellId).html('<img alt="win" src="/Content/SitePics/win.png" />')
            myturn = true;
            $("#errorMsg").html("");
            $("#" + cellId).addClass("used");
            turnsMade++;

            var nr = cellId[4];
            oArr[nr] = 1;

            if (turnsMade == 9 && !(checkWinning(xArr)) && !(checkWinning(oArr))) {
                clearCells(5);
                $('#txtmsg').append("\n[" + getTime() + "] " + "*** DRAW");
                $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
                turnsMade = 0;
                $.connection.hub.start().done(function () {
                    hub.server.updateStats(you, "draw");
                });

            }
            if (checkWinning(xArr) == true) {
                myturn = false;
                clearCells(1);
                $('#txtmsg').append("\n[" + getTime() + "] " + "*** YOU WIN!");
                $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
                $.connection.hub.start().done(function () {
                    hub.server.updateScore(you);
                    hub.server.updateStats(you, "win");
                });
                oArr = [];
                xArr = [];
                console.log(oArr, xArr);
                turnsMade = 0;
                scoreX++;
                $('#stats').html("<p> You: " + scoreX + "</p><p>Opponent: " + scoreY + "</p>");
            }
            if (checkWinning(oArr) == true) {
                myturn = true;
                clearCells(2);
                $('#txtmsg').append("\n[" + getTime() + "] " + "*** YOU LOSE!");
                $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
                $.connection.hub.start().done(function () {
                    hub.server.updateStats(you, "loose");
                });
                oArr = [];
                xArr = [];
                console.log(oArr, xArr);
                turnsMade = 0;
                scoreY++;
                $('#stats').html("<p> You: " + scoreX + "</p><p>Opponent: " + scoreY + "</p>");
            }
        };

        $('#txtmsg').append("[" + getTime() + "] " + "*** Welcome to Tic Tac Toe!");
        $('#txtmsg').append("\n[" + getTime() + "] " + "*** This is game #" + @(Model.ID) + "");

        hub.client.newMessage = function (userName, message) {
            $('#txtmsg').append("\n" + "[" + getTime() + "] " + userName + ": " + message);
            $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
        }

        hub.client.userJoin = function (userName) {
            $('#txtmsg').append("\n" + "[" + getTime() + "] " + "*** " + userName + " has joined the game!");
            $('#txtmsg').append("\n" + "[" + getTime() + "] " + "*** Hey " + you + ", it's your turn!");
            $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
            myturn = true;
        }

        $.connection.hub.start().done(function () {
            hub.server.join(group, you);

            $('#lobbychat').submit(function () {
                var message = $("#message").val();
                if (message.length > 0) {
                    hub.server.addMessage(group, you, message);
                    $('#txtmsg').append("\n" + "[" + getTime() + "] " + you + ": " + $('#message').val());
                    $('#message').val("");
                    $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
                }
                return false;
            });

            $("#tictactoe tr td").click(function () {
                if (myturn == true) {
                    if (!($(this).hasClass("used"))) {
                        hub.server.clickCell(group, this.id);
                        $(this).html('<img alt="mac" src="/Content/SitePics/mac.png" />');
                        myturn = false;
                        $(this).addClass("used");
                        $("#errorMsg").html("");
                        xArr[this.id[4]] = 1;
                        turnsMade++;

                        if (turnsMade == 9 && !(checkWinning(xArr)) && !(checkWinning(oArr))) {
                            clearCells(5);
                            $('#txtmsg').append("\n[" + getTime() + "] " + "*** DRAW");
                            $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
                            turnsMade = 0;
                            $.connection.hub.start().done(function () {
                                hub.server.updateStats(you, "draw");
                            });
                        }

                        if (checkWinning(xArr) == true) {
                            myturn = false;
                            clearCells(3);
                            $('#txtmsg').append("\n[" + getTime() + "] " + "*** YOU WIN!");
                            $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
                            hub.server.updateScore(you);
                            hub.server.updateStats(you, "win");
                            oArr = [];
                            xArr = [];
                            console.log(oArr, xArr);
                            turnsMade = 0;
                            scoreX++;
                            $('#stats').html("<p> You: " + scoreX + "</p><p>Opponent: " + scoreY + "</p>");
                        }
                        if (checkWinning(oArr) == true) {
                            myturn = true;
                            clearCells(4);
                            $('#txtmsg').append("\n[" + getTime() + "] " + "*** YOU LOSE!");
                            $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
                            hub.server.updateStats(you, "loose");
                            oArr = [];
                            xArr = [];
                            console.log(oArr, xArr);
                            turnsMade = 0;
                            scoreY++;
                            $('#stats').html("<p> You: " + scoreX + "</p><p>Opponent: " + scoreY + "</p>");
                        }
                    }
                    else {
                        $("#errorMsg").html("Cell occupied!");
                    }
                }
                else {
                    $("#errorMsg").html("It's not your turn to make a move!");
                }
            });

            $('#lobbychat').submit(function () {
                var message = $("#message").val();
                if (message.length > 0) {
                    hub.server.addMessage(group, you, message);
                    $('#txtmsg').append("\n" + "[" + getTime() + "] " + you + ": " + $('#message').val());
                    $('#message').val("");
                    $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
                }
                return false;
            });
        });
    });

    
</script>
